<!--
@name:editDorctorDialog
@author:Zhenglei
@date:16:14
@description:editDorctorDialog
@update:2022/5/2016:14
-->
<template>
  <el-dialog title="配置检测项"
             :visible.sync="visible"
             :before-close="modalClose"
             :close-on-click-modal="false"
             width="60%"
             :close-on-press-escape="false">
    <el-form>
      <el-form-item>
        <el-button type="success"
                   @click="handleOption('add')">新 增 一 项
        </el-button>
        <element-table class="mt-20"
                       :columns="columnsDetectItem"
                       :data="tableData">
          <template v-slot:price="{row}">
            <el-tag>{{
                (detectListData.price || '') + '元' + '/' + (detectListData.num || '') + ((detectListData.unit == 1 ? '小时' : '次') || '')
              }}
            </el-tag>
          </template>
          <template v-slot:name="{row}">
            <el-input
              v-model="row.name"
              placeholder="请输入检查项目"/>
          </template>
          <template v-slot:deviceIdList="{row,index}">
            <el-select v-model="row.deviceIdList"
                       clearable
                       filterable
                       multiple
                       @click.native="handleClick(index)"
                       placeholder="请选择检测指标">
              <el-option v-for="item in deviceIdsCopy"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>

            </el-select>
          </template>
          <template v-slot:count="{row}">
            <el-input
              v-model="row.count"
              placeholder="请输入时长"/>
          </template>
          <template v-slot:unit="{row}">
            <el-select v-model="row.unit"
                       clearable
                       placeholder="请选择单位">
              <el-option label="小时"
                         :value="1"/>
              <el-option label="次"
                         :value="2"/>
            </el-select>
          </template>
          <template v-slot:suggest="{row}">
            <el-input
              v-model="row.suggest"
              placeholder="请输入频次"/>
          </template>

          <template v-slot:option="{row,index}">
            <el-button type="danger"
                       @click="handleOption('del', row,index)">删除
            </el-button>
          </template>
        </element-table>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button type="primary"
                 @click="handleOption('submit', null)">确 认
      </el-button>
      <el-button @click="modalClose"
                 style="margin-left: 8px">取 消
      </el-button>
    </p>

  </el-dialog>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";

export default {
  name: "editDorctorDialog",
  props: {
    detectListData: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      columnsDetectItem: [
        {
          label: '服务选项',
          prop: 'price',
          align: "center",
          isSlot: true
        }, {
          label: '检查项目',
          prop: 'name',
          align: "center",
          isSlot: true

        }, {
          label: '检测指标',
          prop: 'deviceIdList',
          align: "center",
          width: 400,
          isSlot: true

        }, {
          label: '时长/次数',
          prop: 'count',
          align: "center",
          isSlot: true
        }, {
          label: '单位',
          prop: 'unit',
          align: "center",
          isSlot: true
        }, {
          label: '频率',
          prop: 'suggest',
          align: "center",
          isSlot: true
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
        }
      ],
      tableData: [],
      deviceIds: [],
      deviceIdsCopy: [],
      parse: {},
    }
  },
  created() {
    let parse = JSON.parse(JSON.stringify(this.detectListData));
    this.tableData = parse.detectList ? parse.detectList : []
    this.parse = parse
    this.getDetectionList()
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    handleOption(op, row) {
      switch (op) {
        case 'add':
          this.tableData.push({
            price: '',
            name: '',
            deviceIdList: [],
            count: '',
            unit: '',
            suggest: '',
          })
          break
        case 'del':
          this.tableData.splice(row, 1)
          break
        case 'submit':
          this.tableData.forEach(item => {
            item.price = this.parse.price
          })
          this.$emit('handleResultDetect', this.tableData)
          this.modalClose()
          break
      }
    },
    handleClick(index) {
      let deviceIdList = this.tableData.map(item => item.deviceIdList)
      let selectArr = []//所有选中的id
      deviceIdList.forEach(item => {
        item.forEach(id => {
          selectArr.push(id)
        })
      })
      let ownArr = this.tableData[index].deviceIdList//自身id
      let arr = selectArr.filter(item => {
        return ownArr.every(its => {
          return its != item
        })
      })
      this.deviceIdsCopy=JSON.parse(JSON.stringify(this.deviceIds))

      this.deviceIdsCopy=this.deviceIdsCopy.filter(item=>{
        return arr.every(its=>{
          return its !=item.id
        })
      })
    },
    // 获取检测指标列表
    getDetectionList() {
      let param = {
        pageSize: 300,
        pageIndex: 0
      };
      this.post(this.api.deviceList.url, param).then((res) => {
        if (res.data.code === '200') {
          this.deviceIds = res.data.object;
          this.deviceIdsCopy = res.data.object;
        }
      })
    },

  },
  components: {
    'element-table': ElementTable
  }
}
</script>

<style scoped>

</style>
